<template>
	<view class="pb-100">
		<view class="flex1 plr-36 pb-10 bb">
			<view class="img">
				<image :src="info.banner" mode=""></image>
			</view>
			<view class="ml-30 ptb-10">
				<view class="img-shop size-26 flex1 flex-middle">
					<image src="../../static/shop-icon.png" mode=""></image>
					<text class="ml-10">{{info.merchant_name}}</text>
				</view>
				<view class="bold mtb-20 u-line-2">
					{{info.name}}
				</view>
				<view class="size-26">
					{{info.description}}
				</view>
				<!-- <view class="size-26 gray-2">
					半年消费3721
				</view> -->
			</view>
		</view>
		<view class="plr-36 ptb-20 bb" v-if="info.type==1">
			<view class="size-34 bold">
				套餐详情
			</view>
			<view class="flex mt-20" v-for="(item, key) in info.set_meal.meal_content" :key="key" v-if="info.set_meal">
				<view class="">
					{{item.meal_name}}
				</view>
				<view class="flex">
					<view>{{item.meal_num}}份</view>
					<view class="text-right" style="width: 120rpx;">{{item.meal_price}}元</view>
				</view>
			</view>
			<view class="flex flex-end mt-20">
				<view class="flex">
					<view>总价</view>
					<view class="text-right gray-2" style="width: 120rpx;text-decoration: line-through;">{{info.market_price}}元</view>
				</view>
			</view>
			<view class="flex flex-end mt-20">
				<view class="flex">
					<view>优惠价</view>
					<view class="text-right red" style="width: 120rpx;">{{info.set_meal_price}}元</view>
				</view>
			</view>
			<view class="mt-20 ptb-20 bt">
				<view class="gray-2 mt-10">
					更多说明
				</view>
				<view class="mt-10" v-if="info.set_meal">
					<rich-text :nodes="info.set_meal.meal_description"></rich-text>
				</view>
			</view>
		</view>
		<view class="ml-36 pr-36 ptb-20 bb" v-if="info.type==2&&info.server">
			<view class="size-34 bold">
				服务详情
			</view>
			<view class="gray-2 mt-20">
				服务项目
			</view>
			<view class="mt-10" v-if="info.server">
				<rich-text :nodes="info.server.service_description"></rich-text>
			</view>
			<view class="gray-2 mt-20">
				适用范围
			</view>
			<view class="mt-10">
				{{info.server.range}}
			</view>
			<view class="gray-2 mt-10">
				更多说明
			</view>
			<view class="mt-10" v-if="info.server">
				<rich-text :nodes="info.server.meal_description"></rich-text>
			</view>
		</view>
		
		<view class="ml-36 pr-36 ptb-20">
			<view class="size-34 bold mb-20">
				图文详情
			</view>
			<rich-text :nodes="info.detail"></rich-text>
		</view>
		<view class="fixed-bottom plr-36 bg-white flex" style="box-shadow: 0px -2px 6px rgba(238, 238, 238, 0.68);">
			<view class="flex1 flex-middle">
				<view class="red">
					<text class="size-26">￥</text>
					<text class="size-40 bold">{{info.set_meal_price}}</text>
				</view>
				<view class="size-26 ml-20 gray-2">
					门市价
					<text class="ml-10" style="text-decoration: line-through;">￥{{info.market_price}}</text>
				</view>
			</view>
			<view class="bold bg-yellow ptb-9 plr-20 radius-10 white" @click="goOrder">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {}
			};
		},
		onLoad(option) {
			this.id = option.id
			this.init()
		},
		methods: {
			init() {
				this.$http('/api/shop/productInfo', {
					product_id: this.id
				}).then(data => {
					this.$set(data,'detail',data.details.replace(/\<img/gi, '<img style="width:100%;height:auto"'))
					this.info = data
					uni.setNavigationBarTitle({
						title: data.name
					});
				})
			},
			goOrder() {
				uni.navigateTo({
					url: '/pages/home/integral-order?id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	.img-shop {
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.fixed-bottom {
		height: 96rpx;
	}
</style>
